<template>
  <div :key="num">
    <Vue3JsonEditor
      v-if="queryJson"
      v-model="queryJson"
      mode="code"
      :show-btns="false"
      :expandedOnStart="true"
      @json-change="onJsonChange"
      @mode-change="onModeChange"
      @json-save="jsonSave"
      @has-error="jsonError"
    />
    <el-alert
      v-if="errMsg"
      :closable="false"
      style="margin-top: 10px"
      title="Json格式错误: "
      type="error"
      ><template #default>
        <pre>{{ errMsg }}</pre>
      </template></el-alert
    >
    <!-- <div v-html="errMsg"></div> -->
  </div>
</template>
<script lang="ts" setup>
import { Vue3JsonEditor } from 'vue3-json-editor'
import { ref, watch } from 'vue'
const queryJson = defineModel()
const num = ref(0)
watch(
  queryJson,
  () => {
    // 外部改变queryJson无法触发该组件刷新，须靠此处监听刷新组件
    // console.log('queryJson ', queryJson.value)
    // num.value++
    // 鼠标光标定位回尾部
  },
  { deep: true }
)
const errMsg = ref('')
function onJsonChange(value) {
  queryJson.value = value
  errMsg.value = ''
  // console.log('onJsonChange:', value)
}

function onModeChange(value) {
  //console.log('onModeChange:', value)
}
function jsonSave(value) {
  //console.log('jsonSave:', value)
}
function jsonError(value) {
  if (value.message && value.stack) {
    errMsg.value = value.message
  }
  // console.log('jsonError:', value.message)
}
</script>
<style scoped>
:deep(.jsoneditor-outer > div) {
  max-height: 75vh !important;
}
/* :deep(.jsoneditor-mode-code) {
  resize: both;
  overflow: auto;
}
:deep(.jsoneditor-mode-tree) {
  resize: both;
  overflow: auto;
} */
:deep(.jsoneditor-vue) {
  resize: both;
  overflow: auto;
}
</style>
